<template>
	<view class="page-container">
		<!-- App icon -->
		<view class="app-icon">
			<image src="/static/logo.png"></image>
		</view>
		<view class="login-title">
			<text>zero-firebase 示例</text>
		</view>
		
		<view class="input-group">
			<input class="input-email" type="text" v-model="email" placeholder="请输入邮箱" />
			<input class="input-email" type="password" v-model="password" placeholder="请输入密码" />
		</view>
		<button class="login-button" @click="goToLoginEmail">邮箱登录</button>
		<view class="login-google" @click="goToGoogle">
			<image src="/static/icon_google_login.svg"></image>
			<text>Google</text>
		</view>
		
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
    // #ifdef APP-PLUS
	import { signInGoogle, loginEmail,registEmail,sendPasswordResetEmail } from '@/uni_modules/zero-firebase'
	// #endif
	let email = ref('')
	let password = ref('')

	// 调用Google登录
	const goToGoogle = () => {
		// #ifdef APP-PLUS
		let options = {
			success: (res) => {
						uni.hideLoading()
		              console.log("success",JSON.stringify(res))
					  let idToken = res.message
					  //获取到idToken进行服务器相关交互
					  // loginByFirebaseTokenId(idToken)
		            },
		            fail: (res) => {
						uni.hideLoading()
		              console.log("fail",JSON.stringify(res))
		            }
		        } 
		signInGoogle(options);
		// #endif
	}

	// 登录邮箱
	const goToLoginEmail = () => {
		// #ifdef APP-PLUS
		let options = {
			success: (res) => {
                      console.log("success",JSON.stringify(res))
					  let idToken = res.message
					  //获取到idToken进行服务器相关交互
					  // loginByFirebaseTokenId(idToken)
                    },
                    fail: (res) => {
						uni.hideLoading()
                      console.log("fail",JSON.stringify(res))
                    }
                } 
        loginEmail(email.value, password.value, options);
		// #endif	
	}

	// 注册邮箱
	const goToRegistEmail = () => {
		// #ifdef APP-PLUS
			let options = {
			success: (res) => {
						uni.hideLoading()
                      console.log("success",JSON.stringify(res))
					  //注册成功后，跳转至登录页面

                    },
                    fail: (res) => {
						uni.hideLoading()
                      console.log("fail",JSON.stringify(res))
			
                    }
                } 
        	registEmail(email.value, password.value, options);
		// #endif
	}

	// 发送密码重置邮件
	const goToSendPasswordResetEmail = () => {
		// #ifdef APP-PLUS
			let options = {
			success: (res) => {
						uni.hideLoading()
                      console.log("success",JSON.stringify(res))
					  //发送密码重置邮件成功
                    },
                    fail: (res) => {
						uni.hideLoading()
                      console.log("fail",JSON.stringify(res))
                    }
                } 
        	sendPasswordResetEmail(email.value, options);
		// #endif
	}
</script>

<style>
	page {
		background-color: #111827;
	}
	.app-icon {
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 120rpx auto 60rpx auto;
	}

	.app-icon image {
		align-items: center;
		width: 360rpx;
		height: 360rpx;
	}

	.app-icon text {
		font-size: 40rpx;
		color: white;
	}
	.login-title{
		color: white;
		font-size: 28rpx;
		text-align: center;
	}
	.login-title text a{
		display: inline-block; /* 使元素支持 padding */
		  border-bottom: 1px solid #ffffff; /* 设置下划线的粗细和颜色 */
		  padding-bottom: 2px; /* 控制下划线与文字的距离 */
	}
	.login-btn-a-g{
		display: flex;
		justify-content: center;  /* 水平居中对齐 */
		align-items: center;  /* 垂直居中对齐 */
		margin-top: 40rpx;
	}
	.login-btn-group{
		display: flex;
		  flex-direction: row;  /* 水平排列按钮 */
	}
	.login-btn-item{
		background-color: #CCE347;
		  width: 240rpx;
		  padding: 24rpx;
		  border-radius: 20rpx;
		  display: flex; /* 使用 flex 布局 */
		  justify-content: center; /* 水平居中对齐 */
		  align-items: center; /* 垂直居中对齐 */
		  text-align: center; /* 确保文字居中 */
		  margin-left: 20rpx;
		  margin-right: 20rpx;
	}
	.login-btn-item image{
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
	}
	.login-btn-item text {
	  font-size: 32rpx;
	  color: #111827;
	  line-height: 60rpx; /* 保证文字垂直居中 */
	  font-weight: 600;
	}
	.login-btn-email{
		background: #E1E5CB;
		text-align: center;
		margin: 40rpx 70rpx 0rpx 70rpx;
		padding: 30rpx 0;
		border-radius: 20rpx;
		font-weight: bold;
	}
	
	.login-google {
		margin: 40rpx 70rpx 0rpx 70rpx;
		height: 100rpx;
		background-color: #CCE347;
		border-radius: 20rpx;
		text-align: center;
		display: flex; /* 使用 flex 布局 */
		justify-content: center; /* 水平居中对齐 */
		align-items: center; /* 垂直居中对齐 */
		text-align: center; /* 确保文字居中 */
	}
	.login-google image{
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
	}
	.login-google text {
	  font-size: 32rpx;
	  color: #111827;
	  line-height: 60rpx; /* 保证文字垂直居中 */
	  font-weight: 600;
	}
	
	.login-button { 
		margin: 40rpx 70rpx 0rpx 70rpx;
		background: #E1E5CB !important; 
		color: #000 !important;
		border-radius: 20rpx !important;
		font-size: 30rpx;
		height: 100rpx;
		padding-top: 10rpx;
		font-weight: 600;
		text-align: center;
	}

	.input-group input {
		padding: 26rpx;
		margin: 20rpx 70rpx;
		border-radius: 16rpx;
		background-color: #E3E3E3;
	}
	.input-password{
		margin-top: 30rpx;
	}
</style>
